<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>layui</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/StudentSelect.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/search.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.1.js}"></script>
    <link rel="stylesheet" th:href="@{/css/daohang.css}" />
    <script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->

</head>
<body bgcolor="">
<!--轮播图片-->
<div class="layui-carousel" id="test1">
    <div carousel-item="">
        <div><img src="image/lun.jpg" width="100%" height="100%"/></div>
        <div><img src="image/lun2.jpg" width="100%" height="100%"/></div>
        <div><img src="image/13.jpg" width="100%" height="120%"/></div>
    </div>
</div>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , arrow: 'none' //始终显示箭头
            , width: '1080px'
            , height: '150px'
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
<fieldset class="layui-elem-field layui-field-title" >
    <legend><span class="" style="font-size: 14px">
        <a href="/dor/indexdemo">首页<span class="layui-box">&gt;</span></a>
  <span>学生管理<span class="layui-box">&gt;</span></span>
  <a href="/dor/studemo">学生查看<span class="layui-box">&gt;</span></a>
</span>
    </legend>
</fieldset>
<div class="layui-btn-group demoTable">
</div>

<div style="display: flex" class="demoTable">
    <form method="get">
        <select name="target" class="search_select">
            <option value="2">班级</option>
            <option value="1">宿舍号</option>
            <option value="stu_id">学生ID</option>
            <option value="name">名字</option>
            <option value="" selected="selected" hidden="hidden">类型</option>
        </select>
        <input class="search_input" name="searchText" type="text" placeholder="请输入搜索的内容"/>
        <select hidden="hidden" id="build"  class="search_select2"></select>
        <select hidden="hidden" id="room" class="search_select2"></select>
        <input id="r_id" hidden="hidden" name="rid"/>
        <select  hidden="hidden" id="stuclass" class="search_select2"></select>
        <button id="searchBtn" class="search_btn" data-type="reload">搜索</button>
    </form>
    <div style='left:800px'>
        <!--<form>-->
        <!--<input class="search_btn1" name="" type="button" value="添加一名学生信息" onClick="location.href='http://127.0.0.1:8080/dor/addStu'" />-->
        <!--<input class="search_btn1" name="" type="button" value="批量删除" onClick="delStu()" />-->
        <!--</form>-->
    </div>
    <form action="/dor/exportStu" method="post" >
        <input class="search_btn1" id="exportBtn" name="" type="submit" value="导出文件" />
    </form>
</div>
<table id="LAY_table_user" lay-filter="demo">
</table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-mini" lay-event="detail" onclick="look()">查看编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
</script>

<!--弹出详细信息-->
<div class="look_div" hidden="hidden" id="look_div">
    <div class="layui-layer-title" style="cursor: move;">学生详情</div>
    <div class="layui-layer-setwin" ><a class="layui-layer-ico layui-layer-close layui-layer-close1 out_bg"  href="javascript:;"></a></div>
    <br/>
    <form class="layui-form layui-form-pane" id="teaForm"  action="" method="put">
        <div  class="layui-anim layui-anim-scale">
            <div style="display: flex;align-items: center;">
                <div class="layui-form-item">
                    <label class="layui-form-label">学号</label>
                    <div class="layui-input-block">
                        <input type="text" id="stu_id" name="stu_id" autocomplete="off" placeholder="请输入学号" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="name" id="stuname" placeholder="请输入姓名" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
            </div>

            <div style="display: flex;align-items: center;">
                <div class="layui-form-item">
                    <label class="layui-form-label">寝室号</label>
                    <div class="layui-input-block">
                        <input type="text" name="room_id" id="roomid" placeholder="请输入寝室号" autocomplete="off"
                               class="layui-input"/>
                    </div>
                </div>


                <div class="layui-form-item" pane="">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block" >
                        <!-- <input type="radio" id="nan"  name="sex" value="男" title="男"  />
                         <input type="radio" class="nv" name="sex" value="女" title="女" />-->
                        <!--<select name="sex" id="sex" >
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>-->
                        <input type="text" name="sex" id="sex" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
            </div>

            <div style="display: flex;align-items: center;">
                <div class="layui-form-item">
                    <label class="layui-form-label">班级</label>
                    <div class="layui-input-block">
                        <input type="text" name="cla" id="stucla" placeholder="请输入班级" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">学院</label>
                    <div class="layui-input-block">
                        <input type="text" name="acad" id="stuacad" placeholder="请输入学院" autocomplete="off"
                               class="layui-input"/>
                    </div>
                </div>
            </div>

            <div style="display: flex;align-items: center;">
                <div class="layui-form-item">
                    <label class="layui-form-label">手机</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" id="stuphone" placeholder="请输入手机" autocomplete="off"
                               class="layui-input"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">验证日期</label>
                    <div class="layui-input-block">
                        <input type="text" name="time" id="date" lay-verify="date" placeholder="yyyy-MM-dd"
                               autocomplete="off" class="layui-input"/>
                    </div>
                </div>
            </div>

            <div style="display: flex;align-items: center;">


                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-block">
                        <input type="text" name="password" id="stupassword" placeholder="请输入密码" autocomplete="off"
                               class="layui-input"/>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">出生日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="birthday" id="stubirth"  autocomplete="off" lay-verify="date" placeholder="yyyy-MM-dd"
                               class="layui-input"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生源地</label>
                <div class="layui-input-inline">
                    <input type="text" name="pro" id="stupro"   autocomplete="off"
                           class="layui-input"/>
                </div>
            </div>

            <div class="layui-form-item">
                <button class="layui-btn" lay-submit="" onclick="gexing()" lay-filter="demo2">更新</button>
            </div>
        </div>
    </form>
</div>

<div class="out_bg" hidden="hidden"></div>



<script type="text/javascript" th:src="@{/js/StudentSelect.js}"></script>
<script>
    /*<![CDATA[*/
    var searchSelectText
    var selectType = 'all'
    var selectVal
    var rid
    var cla
    var ids = new Array();
    //选择类型换搜索框
    $('.search_select').on('change', function () {
        searchSelectText = $(this).val()
        if (searchSelectText == "1"){
            $('.search_input').val("");
            $('.search_input').hide();
            $('#build').show();
            $('#room').show();
            $('#stuclass').val("");
            $('#stuclass').hide();

            var build;
            var room;
            $('#build').change(function () {
                build = $('#build').val();
                if (build != undefined && room != undefined) {
                    $('#r_id').val(room)
                }
            })
            $('#room').change(function () {
                room = $('#room').val()
                if (build != undefined && room != undefined) {
                    $('.search_input').val(room)
                    console.log("searchSelectText:"+searchSelectText)
                }
            })

        }else if(searchSelectText == "2"){
            $('.search_input').val("");
            $('.search_input').hide();
            $('#build').val();
            $('#room').val();
            $('#build').hide();
            $('#room').hide();
            $('#stuclass').show("");
            $('#stuclass').show();

            var i
            $('#stuclass').change(function () {
                i = $('#stuclass').val()
                console.log("class:"+ i);
                $('.search_input').val(i);
            })
        }
        else {
            $('.search_input').show();
            $('.search_input').val("");
            $('#build').hide();
            $('#room').hide();
            $('#build').val("")
            $('#room').val("")
            $('#stuclass').val("");
            $('#stuclass').hide();
        }
//        console.log(searchSelectText);
    })
    /*]]>*/
    layui.use('table', function(){
        var table = layui.table;
        //方法级渲染
        table.render({
            elem: '#LAY_table_user'
            ,url: '/dor/stu'
            ,cols: [[
                {checkbox: true, fixed: true}
                ,{field:'stu_id', title: 'ID', width:120, sort: true, fixed: true}
                ,{field:'r_id', title: '寝室编号', width:110, sort: true}
                ,{field:'name', title: '姓名', width:80}
                ,{field:'sex', title: '性别', width:60}
                ,{field:'acad', title: '学院', width:120}
                ,{field:'pro', title: '生源地', sort: true, width:80}
                ,{field:'birthday', title: '出生日期', sort: true, width:130}
                ,{field:'cla', title: '班级', width:80,sort: true}
//                ,{field:'', title: '操作', width:135, toolbar: '#barDemo'}
            ]]
            ,id: 'LAY_table_user'
            ,page: true
            ,height: 0
        });

        var $ = layui.$, active = {
            reload: function(){
                var query = $('.search_input').val()
                console.log("query"+ query);
                /*var query1 = $('#r_id').val()*/
                /*     var query2 = $('#stuCla').val()*/
                table.reload('LAY_table_user', {
                    where: {
                        target: searchSelectText,
                        searchText: query
                        /* rid :query1,*/
                        /*  cla: query2*/
                    }
                });
            }
        };

        $('.demoTable .search_btn').on('click', function(e){
            e.preventDefault()
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
            selectType = searchSelectText
            selectVal = $('.search_input').val()
            $('#exportBtn').before('<input name="target" hidden="hidden" value="' + selectType + '" />');
            $('#exportBtn').before('<input name="selectVal" hidden="hidden" value="' + selectVal + '" />');
        });


        //监听表格复选框选择
        table.on('checkbox(demo)', function (obj) {
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function (obj) {
            var data = obj.data;

            console.log(obj.data);
            $('#stu_id').val(obj.data.stu_id);
            $('#stuname').val(obj.data.name);
            $('#roomid').val(obj.data.r_id);
            $('#stuacad').val(obj.data.acad);
            $('#stucla').val(obj.data.cla);
            $('#date').val(obj.data.time);
            $('#stubirth').val(obj.data.birthday);
            $('#stupassword').val(obj.data.password);
            $('#stuphone').val(obj.data.phone);
            $('#stupro').val(obj.data.pro);
            $('#sex').val(obj.data.sex);


//            $('#sex')[0].selected = true
//            console.log($('#sex')[0].options[1].selected)

            if (obj.event === 'detail') {
               /* layer.msg('ID：' + data.stu_id + ' 的查看操作');*/
            } else if (obj.event === 'del') {


                layer.confirm('确认删除该学生信息', function (index) {
                    $.ajax({
                        type: "DELETE",
                        url: "/dor/stu/" + obj.data.stu_id,
                        data: "{}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) { // Play with response returned in JSON format
                            return true;
                        },
                        error: function (msg) {
                            return false;
                        }
                    });

                    obj.del();
                    layer.close(index);
                    // console.log('年后');

                });
            } else if (obj.event === 'add') {
                layer.alert("ddd")
            }
        });

        $('.out_bg').click(function () {
            $('.out_bg').hide();
            $('#look_div').hide();
        });


        /*<![CDATA[*/
        table.on('checkbox(demo)', function(obj){
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
            if (obj.type == 'one') {
                if (obj.checked) {
                    ids.push(obj.data.stu_id)
                } else {
                    var array = new Array();
                    for (var i=0; i < ids.length; i++) {
                        if (ids[i] != obj.data.stu_id) {
                            array.push(ids[i]);
                        }
                    }
                    ids = new Array();
                    ids = array;
                }
            }
            console.log(ids);
        });
        /*]]>*/
    });

    $('#file').change(function () {
        var file = $('#file')[0].files[0].name;
        $('#filename').html(file);
    })

    function delStu() {
        console.log(ids);
        $.ajax({
            type:"POST",
            url:"/dor/delStu",
            dataType:"json",
            contentType:"application/json",
            data:JSON.stringify(ids),
            success:function(data){
                window.location.reload(true)
            }
        });
    }


</script>
<script>
    //寝室号的select 和拼接
    /*<![CDATA[*/
    $.get('/dor/build', function (data) {
//        console.log(data)
        buildList = '<option selected="selected" hidden="hidden">选择楼栋</option>'
        data.forEach(function (value) {
//            console.log(value)
            buildList+='<option>'+value.build_id+'</option>'
        })
        /*  console.log(buildList)*/
        $("#build").html(buildList)
    })

    $("#build").on('click', function () {
        var build = $("#build").val()
        console.log('0'+build)
        $.get('/dor/rooms/'+build, function (data) {
//        console.log(data)
            buildList = '<option hidden="hidden">选择寝室</option>'
            data.forEach(function (value) {
//            console.log(value)
                buildList+='<option value="'+value.id+'">'+value.room_id+'</option>'
            })
//            console.log(buildList)
            $("#room").html(buildList)
        })
    })
    /* 寝室编号的拼接*/
    /*  var build;
     var room;
     $('#build').change(function () {
     build = $('#build').val();
     if (build != undefined && room != undefined) {
     $('#r_id').val(room)
     }
     })
     $('#room').change(function () {
     room = $('#room').val()
     if (build != undefined && room != undefined) {
     $('#r_id').val(room)
     console.log(room)
     }
     })*/

    //班级的select 搜索
    $.get('/dor/stuAllCla', function (data) {
//        console.log(data)
        AllCla = '<option selected="selected" hidden="hidden">选择班级</option>'
        data.forEach(function (value) {
            /*  console.log(value)*/
            AllCla+='<option>'+value+'</option>'
        })
        /*  console.log(buildList)*/
        $("#stuclass").html(AllCla)
    })




    //更新学生
    function gexing() {
        var tea= new FormData($("#teaForm")[0]);
        /*for (var [key, value] of tea.entries()) {
         console.log(key, value);
         }*/
        /*var objData = {};

         for (var entry of tea.entries()){
         objData[entry[0]] = entry[1];
         }*/
        var list = $("#teaForm").serializeArray();
        var objData = {};
        for (var i = 0; i < list.length; i++) {
            objData[list[i].name] = list[i].value;
        }
        var date = JSON.stringify(objData);
        $.ajax({
            url: "/dor/stu/update",
            type: "post",
            data: date,
            async: false,
            cache: false,
            processData: false,
            contentType: "application/json; charset=utf-8",
            success: function (data) { // Play with response returned in JSON format
                if (data) {
                    window.location.reload(true);
                }
            },
            error: function (msg) {
                return false;
            }
        });
    }




    /*]]>*/
</script>

</body>
</html>